<template>
  <u-page class="example-upopup">
    <view>居中弹窗</view>
    <button @click="showDialog('centerDialog')">居中弹窗</button>
    <view>底部弹窗</view>
    <button @click="showDialog('bottomDialog')">底部弹窗</button>
    <u-popup v-model="centerDialog" type="center" title="我是标题" text="aaaaa"></u-popup>
    <u-popup v-model="bottomDialog" type="bottom">
      <template #content>
        <view class="p40 f16">填写内容</view>
      </template>
    </u-popup>
  </u-page>
</template>
<script lang="ts">
export default {
  name: 'exampleUpopup'
}
</script>
<script lang="ts" setup>
import { reactive, toRefs } from 'vue'
const dataMap = reactive({
  centerDialog: false,
  bottomDialog: false,
  showDialog(type: 'centerDialog' | 'bottomDialog') {
    dataMap[type] = true
  }
})
const { centerDialog, bottomDialog, showDialog } = toRefs(dataMap)
</script>

<style lang="scss" scoped>
</style>
